<!DOCTYPE html>
<html lang="en">

<head>
    <title>授权</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="/css/style.css" rel="stylesheet" type="text/css" />
    <script src="/js/vue3.js"></script>
    <script src="/js/axios.min.js"></script>
</head>

<body>

    <div class="place">
        <span>位置：</span>
        <ul class="placeul">
            <li><a href="#">权限管理</a></li>
            <li><a href="#">用户角色管理</a></li>
            <li><a href="#">授权</a></li>
        </ul>
    </div>

    <div class="formbody" id="box">
        <!-- 工具栏 -->
        <div class="tools">
            <ul class="toolbar">
                <li v-on:click="goback"><span><img src="/images/t04.png" /></span>返回</li>
            </ul>
        </div>
        <form id="uploadForm">
            <div class="formtitle"><span>授权</span></div>
            <ul class="toollist">
                <template v-for="(item,index) in allRoleList ">
                    <li>
                        <input type="checkbox" name="ck" v-model="checkList" :value="item.id">
                        <a href="#"><img src="/images/i07.png" /></a>
                        <h2>{{item.rolename}}</h2>
                    </li>
                </template>
            </ul>
            <input type="button" class="scbtn" v-on:click="updateAdminRoleButton" value="修改">
        </form>
    </div>
</body>

<script>
    var paras = location.search; // search获得地址中的参数，内容为'?itemId=12'
    var temp = paras.split('=');
    var itemId = temp[1]; // 根据参数名"itemId"，获取参数值
    var obj = {
        data () {
            return {
                checkList: [], // 勾选复选款框的数据
                allRoleList: [], // 所有角色
                adminId: '' // 待修改的管理员ID
            }
        },
        mounted () {
            axios({
                method: 'get',
                url: '/blog/admin/roleAdminPower/' + itemId,
            }).then(function (result) {
                console.log(result);
                vm.adminId = itemId;
                vm.allRoleList = result.data.data;
                vm.allRoleList.forEach((item) => {
                    if (item.description == "true") {
                        vm.checkList.push(item.id);
                    }
                })
            });
        },
        methods: {
            updateAdminRoleButton () {
                if (confirm("确定修改权限吗?")) {
                    var check_value = vm.checkList;
                    if (check_value.length == 0) {
                        check_value.push(-1);
                    }
                    axios({
                        method: 'put',
                        url: '/blog/admin/roleAdminPower/' + vm.adminId + "/" + check_value,
                    }).then(function (result) {
                        window.alert(result.data.msg);
                        if (result.data.code == 0) {
                            setTimeout(function () {
                                window.location.reload();
                            }, 500);
                        }
                    });
                }
            },
            goback () {
                window.history.back();
            }
        }
    }
    var vm = Vue.createApp(obj).mount("#box")
</script>

</html>